<template>
    <div>

        <div class="column">
            <div class="container layout column-elem ">

                <div style="margin: 0 auto;">

                    <!-- 用户 -->
                    <div class="content" style="padding:0px">
                        <div class="path-description" style="margin:0px">
                            <div class="path-desc-top clearfix"
                                :style="pathTop" style="background-size: cover; height: 150px;">
                                <div class="name-total-box clearfix">
                                    <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                                        <h4 v-if="!user">请先登录！</h4>
                                        <h4 v-if="user">{{user}},你好！</h4>
                                        <!-- <h4>{{this.$store.state.user.user}},下午好！</h4> -->
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-md-offset-1 path-total-courses">
                                    <span class="total-courses-box"> 退出 </span>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- 平台
                    <div class="plat-Total">
                        <div class="content plat" style="padding:0px">
                            <div class="path-description" style="margin:0px">
                                <div class="path-desc-top clearfix"
                                    :style="bgImg" style="background: url('./images/1471513740139.png') no-repeat;background-size: cover;">
                                    <div class="name-total-box clearfix">
                                        <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                                            <h4>平台理念</h4>
                                            <h4>先学习 后付费</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="path-desc-btm">
                                    <div class="col-sm-12 col-md-8  clearfix text-right" style="padding-top:0px">
                                        <div class="col-xs-12">
                                            帮助年轻学子解决没有学费接受优质教育或交了学费没有得到后续优质教育服务问题
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="content plat" style="padding:0px">
                            <div class="path-description" style="margin:0px">
                                <div class="path-desc-top clearfix"
                                    :style="bgImg" style="background: url('./images/1471513740139.png') no-repeat;background-size: cover;">
                                    <div class="name-total-box clearfix">
                                        <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                                            <h4>权益入门</h4>
                                        </div>
                                    </div>
                                </div>

                                <div class="path-desc-btm">
                                    <div class="col-sm-12 col-md-8  clearfix text-right" style="padding-top:0px">
                                        <div class="col-xs-12">
                                            先学习 再付费 不先付
                                        </div>
                                        <div class="col-xs-12">
                                            学多少 付多少 不多付
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div> -->

                    <!-- 轮播图
                    <div class="content" style="padding:0px">
                        <div class="path-description" style="margin:0px">
                            <div class="path-desc-top clearfix"
                                :style="bgImg" style="background: url('./images/1471513740139.png') no-repeat;background-size: cover;">
                                <div class="name-total-box clearfix">
                                    <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                                        <h4>第三方学费收付</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <!-- 课程推荐 -->
                    <div class="plat-Total2">
                        <div class="recommed-course">
                            <div>课程推荐</div>
                            <i>让教育因诚信而美好</i>
                        </div>

                        <div class="content plat" style="padding:0px" v-for="(course,index) in courseList" :key="index">
                            <div class="path-description" style="margin:0px">
                                <div class="path-desc-top clearfix"
                                    :style="bgImg" style="background-size: cover;">
                                </div>

                                <div class="path-desc-btm" >
                                    <div class="clearfix learn-time-div" >
                                        <div class="text-left need-learn-time textcut nameStyle">{{course.name}}</div>
                                    </div>
                                    <div class="clearfix btnPosition" style="padding-top:0px">
                                        <div class="btnPosition">

                                            <a class="btn btn-path-operation btn-join-path" data-sign="signin" @click="toBindCourse"
                                                href="#" data-toggle="modal">先学后付</a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script>
import { mapState } from 'vuex'
import defaultImg from './imgages/course.jpg'
 import topImg from './imgages/path-top.jpg'

export default {
    name: 'HomeIndex',
    data() {
        return {
            bgImg: {
                backgroundImage: "url(" + defaultImg + ")"
            },
            pathTop:{
                backgroundImage: "url(" + topImg + ")"
            },
            user:localStorage.getItem('user')

        }
    },

    computed:{
        ...mapState({
            courseList:function(state){
                return state.courseList.courselist;
            }
        }),

    },
    methods:{

        toBindCourse(){
            const location = {
                name: 'bindCourse',
                // params: { keyword: this.keyword || undefined }
            }
            // if (this.$route.query) { location.query = this.$route.query }
            this.$router.push(location)
        }
    }



}
</script>

<style scoped>
.need-learn-time {
    font-size: 20px;
    color: black;
    font-weight:bold;
}
.btn-join-path{
    background: #f53e07;
}


button {
    background-color: #2e7ba7;
}

.form-group .btn {
    margin: 20px 0;
}



.plat {
    width: 48%;
    display: inline-block;
}

.plat:nth-child(odd) {
    float: right;
}

.column {
    position: relative;
}

.recommed-course {
    display: flex;
    align-items: center;
}

.recommed-course div {
    font: 20px/45px 'Microsoft YaHei';
    color: #f39202;
    padding-right: 4px;

}

.recommed-course i {
    font-style: normal;
}

.total-courses-box {
    padding: 6px;
    color: #787878;
    background: #fff;
    border-radius: 4px;
}

.path-total-courses {
    font-size: 18px;
    line-height: 53px;
}

.path-description .path-desc-top .name-total-box h4 {
    font-size: 20px;
    color: black;
    font-weight:bold;
}

.path-description {
    border-radius: 18px;
}

.plat-Total .path-description .path-desc-top {
    border-radius: 18px 50px;
}

.plat-Total .path-description .path-desc-top {
    /*height: 100px;*/
    /* float: left; */
}

.col-md-8 {
    width: 100%;
}

.text-right {
    /* margin-left: 15px; */
    /*text-align: left;*/
}

.path-desc-btm .col-md-4 {
    /*padding-left: 0%;*/
    /*margin-top: 4px;*/
}

.path-desc-btm .col-xs-12 {
    padding-left: 0%;
    /*margin-bottom: 40px;*/
}
    /*超出部分影藏*/
    .textcut{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:1;
    }
    /*课程推荐*/
    .nameStyle{
        font-size: 16px;
        font-weight: 400;
    }
    /*底部*/
    .plat-Total2{
        margin-bottom: 40px;
    }
    /*先学后付按钮位置*/
    .btnPosition{
        margin: 0 auto;
    }
</style>
